<template>
	<view>
		<view class="body after-navber">
		    <view class="info">
				<view class="info-title flex-row">
				   <view class="flex-x-center width"  @tap="changeStatus(10)">
					   <view :class="'info-text ' + (status == 10 ? 'active' : '')">全部</view>
				   </view>
				    <view class="flex-x-center width"  @tap="changeStatus(0)">
				        <view :class="'info-text ' + (status == 0 ? 'active' : '')">待审核</view>
				    </view>
				    <view class="flex-x-center width"  @tap="changeStatus(1)">
				        <view :class="'info-text ' + (status == 1 ? 'active' : '')">待打款</view>
				    </view>
				    <view class="flex-x-center width"  @tap="changeStatus(2)">
				        <view :class="'info-text ' + (status == 2 ? 'active' : '')">已打款</view>
				    </view>
						
				</view>
		        <view class="info-content">
		            <view class="info-block" v-for="(item, index) in list" :key="index">
		                <view class="info-label flex-row">
		                    <view class="info-left" style="width: 80%">订单号：{{ item.order_no }}</view>
		                    <view class="info-right" style="width: 20%">
		                        <view class="info-status">{{ item.status_text }}</view>
		                    </view>
		                </view>
		
		                <view @tap="showProduct(index)" class="info-label flex-row" :data-index="index">
		                    <view class="info-left flex-row flex-grow-1 flex-y-center">
		                        <view class="info-img flex-y-center">
		                            <image class="img" :src="item.user.avatar"></image>
		                        </view>
		                        <view class="info-name text-more">{{ item.user.nickname }}</view>
		                        <view class="info-level text-more">{{ item.level }}级</view>
		                    </view>
		                    <view class="info-right flex-grow-1" >
		                        <view class="info-money flex-row">
		                            <text>
		                                {{ item.is_give_yongjin != 1 ? '预计' : '已得' }}佣金：
		                                <text class="red">{{ item.level == 1 ? item.first_money :item.second_money }}</text>
		                                元
		                            </text>
		                            <view :class="'down flex-y-center ' + (index == hidden ? 'active' : '')" >
		                                <image src="/static/images/img-share-down.png" style="width: 26rpx; height: 16rpx; margin-left: 24rpx" v-if="index == hidden"></image>
		                                <image src="/static/images/img-share-right.png" style="width: 16rpx; height: 26rpx; margin-left: 24rpx" v-else></image>
		                            </view>
		                        </view>
		                    </view>
		                </view>
		
		                <view :class="index == hidden ? 'show' : 'hide'">
		                    <view class="info-label height-164 flex-row" v-for="(v, index1) in item.item" :key="index1">
		                        <view class="info-left flex-row width-90">
		                            <view class="info-img flex-y-center">
		                                <image class="img img-size-120" :src="v.product_image"></image>
		                            </view>
		                            <view class="info-count">
		                                <view class="info-detail">{{ v.product_title }}</view>
		                                <view class="info-detail">×{{ v.goods_num }}</view>
		                            </view>
		                        </view>
		                    </view>
		                </view>
		            </view>
		        </view>
		        <view class="info-footer flex-row" v-if="!has_more">
		            <view class="info-before">
		                <view class="info-border"></view>
		            </view>
		            <view class="info-t">没有更多了</view>
		            <view class="info-after">
		                <view class="info-border"></view>
		            </view>
		        </view>
		     
		    </view>
		</view>
	</view>
</template>

<script>
	import {My} from '../../../apirequest/my-model.js';
	var m = new My();
	export default {
		data() {
			return {
				status:10,
				list:[],
				page:1,
				has_more:true,
				hidden:0,
			}
		},
		onLoad() {
			this._getList();
		},
		onReachBottom() {
			this._getList();
		},
		methods: {
			_getList(){
				var that= this;
				if(!this.has_more){
					return false;
				}
				var page = this.page
				m.get_share_order_list({page:page,status:this.status	},(res) => {
					if(res.code == 1){
						that.list = that.list.concat(res.data.data)
						that.page = page+1
						that.has_more = res.data.has_more
					}
				})
			},
			changeStatus(status){
				this.status = status
				this.list = []
				this.page = 1
				this.has_more = true
				this._getList()
			},
			showProduct(index){
				if(this.hidden == index){
					this.hidden = -1
				}else{
					this.hidden = index
				}
				
			},
		}
	}
</script>

<style>
.info {
    width: 100%;
    border-top: 1rpx #e3e3e3 solid;
}

.width {
    width: 25%;
    text-align: center;
}

.info-title .active {
    color: #ff4544;
    border-bottom: 4rpx #ff4544 solid;
}

.info-title .info-text {
    height: 100%;
    line-height: 100rpx;
}

.info .info-title {
    height: 100rpx;
    padding: 0 24rpx;
    border-bottom: 1rpx #e3e3e3 solid;
    background-color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}

.info .info-content {
    width: 100%;
	    padding-top: 100rpx;
}

.info .info-content .info-block {
    width: 100%;
    background-color: #fff;
    margin-bottom: 26rpx;
    padding: 0 24rpx;
}

.info-block .info-label {
    width: 100%;
    height: 90rpx;
    border-bottom: 2rpx #e3e3e3 solid;
    font-size: 9pt;
    line-height: 90rpx;
}

.info-block .info-label .info-left {
    width: 50%;
}

.info-block .info-label .info-right {
    width: 50%;
    text-align: right;
}

.info-block .info-label .info-status {
    color: #ff4544;
}

.info-left .info-img {
    width: 30%;
}

.info-left .info-img .img {
    width: 64rpx;
    height: 64rpx;
}

.info-left .info-name {
    margin-right: 36rpx;
    overflow: hidden;
}

.info-block .height-164 {
    height: 164rpx;
}

.info .info-block .info-label .width-90 {
    width: 90%;
}

.info-left .info-img .img-size-120 {
    width: 104rpx;
    height: 104rpx;
}

.info-label .info-left .info-count {
    width: 70%;
}

.info-count .info-detail {
    width: 100%;
    height: 80rpx;
    overflow: hidden;
    -webkit-line-clamp: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

.info-right .info-money {
    text-align: right;
    float: right;
}

.red {
    color: #ff4544;
    font-size: 9pt;
}

.info-block .info-label:last-child {
    border: none;
}

.info .info-footer {
    color: #bbb;
    text-align: center;
    width: 100%;
    padding: 0 100rpx;
    height: 60rpx;
    line-height: 60rpx;
}

.info .info-footer .info-t {
    height: 60rpx;
    margin: 0 20rpx;
}

.info .info-footer .info-before {
    width: 168rpx;
    height: 60rpx;
}

.info .info-footer .info-after {
    width: 168rpx;
    height: 60rpx;
}

.info .info-footer .info-border {
    border-bottom: 1rpx #e3e3e3 solid;
    padding-bottom: 30rpx;
}

.hide {
    display: none;
}

.show {
    display: block;
}
</style>
